<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>热点追踪API预览</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .platform-section {
            background: white;
            margin-bottom: 20px;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .platform-title {
            color: #1890ff;
            border-bottom: 2px solid #1890ff;
            padding-bottom: 10px;
            margin-bottom: 15px;
        }
        .hotspot-item {
            padding: 15px;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
        }
        .hotspot-item:last-child {
            border-bottom: none;
        }
        .rank {
            font-size: 24px;
            font-weight: bold;
            color: #ff4d4f;
            margin-right: 15px;
            min-width: 30px;
            text-align: center;
        }
        .content {
            flex: 1;
        }
        .title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 5px;
            color: #333;
        }
        .description {
            font-size: 14px;
            color: #666;
            margin-bottom: 5px;
        }
        .stats {
            font-size: 12px;
            color: #999;
        }
        .tags {
            margin-top: 5px;
        }
        .tag {
            display: inline-block;
            background: #f0f0f0;
            padding: 2px 8px;
            border-radius: 3px;
            font-size: 12px;
            margin-right: 5px;
        }
        .tag.hot { background: #fff2e8; color: #fa541c; }
        .tag.new { background: #e6f7ff; color: #1890ff; }
        .tag.official { background: #f6ffed; color: #52c41a; }
        .tag.ad { background: #f9f0ff; color: #722ed1; }
        .loading {
            text-align: center;
            padding: 20px;
            color: #999;
        }
        .error {
            color: #ff4d4f;
            padding: 10px;
            background: #fff2f0;
            border-radius: 4px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>🔥 热点追踪API预览</h1>
        <p>实时展示微博、知乎、百度等平台的热搜数据</p>
        <p>API地址: <code>http://localhost:3001/api/hotspots</code></p>
    </div>

    <div class="platform-section">
        <h2 class="platform-title">📱 微博热搜</h2>
        <div id="weibo-hotspots" class="loading">加载中...</div>
    </div>

    <div class="platform-section">
        <h2 class="platform-title">💡 知乎热搜</h2>
        <div id="zhihu-hotspots" class="loading">加载中...</div>
    </div>

    <div class="platform-section">
        <h2 class="platform-title">🔍 百度热搜</h2>
        <div id="baidu-hotspots" class="loading">加载中...</div>
    </div>

    <script>
        // 获取热搜数据
        async function fetchHotspots(platform, containerId) {
            try {
                const response = await fetch(`http://localhost:3001/api/hotspots?platform=${platform}`);
                const data = await response.json();
                
                if (data.success) {
                    renderHotspots(data.data, containerId);
                } else {
                    document.getElementById(containerId).innerHTML = 
                        `<div class="error">加载失败: ${data.error}</div>`;
                }
            } catch (error) {
                document.getElementById(containerId).innerHTML = 
                    `<div class="error">网络错误: ${error.message}</div>`;
            }
        }

        // 渲染热搜列表
        function renderHotspots(hotspots, containerId) {
            const container = document.getElementById(containerId);
            
            if (hotspots.length === 0) {
                container.innerHTML = '<div class="loading">暂无数据</div>';
                return;
            }

            container.innerHTML = hotspots.map(hotspot => `
                <div class="hotspot-item">
                    <div class="rank">${hotspot.rank === 0 ? '置顶' : hotspot.rank}</div>
                    <div class="content">
                        <div class="title">
                            <a href="${hotspot.url}" target="_blank" rel="noopener">
                                ${hotspot.title}
                            </a>
                        </div>
                        <div class="description">${hotspot.description}</div>
                        <div class="stats">
                            热度: ${hotspot.views} | 
                            评论: ${hotspot.comments} | 
                            趋势: ${hotspot.trend > 0 ? '↑' : hotspot.trend < 0 ? '↓' : '→'} ${Math.abs(hotspot.trend)}
                        </div>
                        <div class="tags">
                            ${hotspot.tags.map(tag => {
                                let className = 'tag';
                                if (tag === '热') className += ' hot';
                                if (tag === '新') className += ' new';
                                if (tag === '官方') className += ' official';
                                if (tag === '广告') className += ' ad';
                                return `<span class="${className}">${tag}</span>`;
                            }).join('')}
                        </div>
                    </div>
                </div>
            `).join('');
        }

        // 页面加载时获取数据
        document.addEventListener('DOMContentLoaded', () => {
            fetchHotspots('微博', 'weibo-hotspots');
            fetchHotspots('知乎', 'zhihu-hotspots');
            fetchHotspots('百度', 'baidu-hotspots');
        });
    </script>
</body>
</html>